<template>
    <div class="shoppingcar">
      <main>
        <header class="shoppingcar-header">
          <p>购物车(全部:{{ shoppingcarstore.length }})</p>
          <div>
            <span class="choseSpan">已选商品（不含运费）</span>
            <span class="pricespan" v-if="!price">￥0.00</span>
            <span class="pricespan" v-else-if="price.indexOf('.') === -1">￥{{ price }}.00</span>
            <span class="pricespan" v-else>￥{{ price }}</span>

            <el-button class="orderby" @click="gotoorderFn(price)">结算</el-button>
          </div>
        </header>
        <main>
          <el-table
            ref="multipleTable"
            :data="shoppingcarstore"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="商品信息"
              width="380">
              <template slot-scope="scope">
                <img :src="scope.row.product_img" alt="" class="shoppingcatstoreImg">
                <span class="storeinfo">{{ scope.row.product_name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="单价"
              width="140">
              <template slot-scope="scope">
                <p style="color:red;" v-if="scope.row.price.indexOf('.') !== -1">￥{{ scope.row.price }}</p>
                <p style="color:red;" v-else>￥{{ scope.row.price }}.00</p>
              </template>
            </el-table-column>
            <el-table-column
              label="数量"
              width="140">
                <template slot-scope="scope">
                  <!-- <button class="numbtn" @click="numlowchange(scope.row.id)">-</button>
                  <button class="numadd">{{ scope.row.num }}</button>
                  <button class="numbtn" @click="numaddchange(scope.row.id)">+</button> -->
                  <el-input-number v-model="scope.row.num" @change="handleChange" :min="1" :max="10" label="最多10件" size="small"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="140">
              <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="removeShoopingcarFn(scope.row.id)">
                从购物车移除
              </el-button>
            </template>
            </el-table-column>
          </el-table>
        </main>
      </main>
    </div>
  </template>

<script>
import { getShoopingcarAPI, removeshoppingcarAPI } from '@/api'
import { mapMutations } from 'vuex'
export default {
  name: 'shopping-car',
  data () {
    return {
      shoppingcarstore: [],
      price: '',
      multipleSelection: []
    }
  },
  mounted () {
    this.getshoppingcatStore()
  },
  methods: {
    async getshoppingcatStore () {
      const { data } = await getShoopingcarAPI()
      this.shoppingcarstore = data.data
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      let count = 0
      this.multipleSelection.forEach(item => {
        count += parseFloat(item.price) * item.num
      })
      this.price = count.toString()
    },
    async removeShoopingcarFn (id) {
      const { data } = await removeshoppingcarAPI(id)
      if (data.status === 1) return this.$message.error(data.message)
      this.$message.success(data.message)
      this.getshoppingcatStore()
    },
    handleChange (val) {
      this.shoppingcarstore.num = val
      let count = 0
      this.multipleSelection.forEach(item => {
        count += parseFloat(item.price) * item.num
      })
      this.price = count.toString()
    },
    ...mapMutations(['getOrderList', 'getOrderPrice']),
    // 去结算
    gotoorderFn (price) {
      if (this.multipleSelection.length === 0) {
        alert('您还未选择结算商品')
      } else {
        this.getOrderList(this.multipleSelection)
        this.getOrderPrice(this.price)
        this.$router.push('/settlement')
      }
    }
  }
}
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .shoppingcar {
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .shoppingcar main {
    border-radius: 10px;
    background-color: #fff;
    height: 100%;
    width: 80%;
  }
  .shoppingcar-header {
    display: flex;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: #fff;
    height: 60px;
    line-height: 60px;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .shoppingcar-header:first-child{
    color:#000;
    font-size: 18px;
    font-weight: 600;
    padding-left: 10px;
  }
  .choseSpan {
    font-size: 14px;
    font-weight: 400;
    margin: 5px;
  }
  .pricespan {
    color:red;
    margin: 5px;
    font-weight: 500;
  }
  .orderby {
    display: inline-block;
    width: 74px;
    height: 35px;
    line-height: 35px;
    color: #fff;
    background: #FF5000;
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    border-radius: 21px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    top: -2px;
    font-size: 16px;
    margin: 5px;
  }
  .el-table {
    margin: 15px;
  }
  .shoppingcatstoreImg {
    display: inline-block;
    width: 120px;
    height: 120px;
    margin-right: 10px;
  }
  .storeinfo {
    position:absolute;
    top: 20;
  }
  .numadd {
    background-color: #fff;
    width: 30px;
    border: 1px solid gray;
  }
  .numbtn {
    width: 20px;
  }
  .numbtn:hover {
    border: 1px solid red;
  }
  .el-input-number {
    width: 100px;
  }
</style>
